// 主要样式文件

// 导入配置全局变量和方法
@import "./config.less";

body {
    .main {
        .header {
            padding: 0.5rem var(--h-margin);
            height: 100%;
            width: 240px;
            width: var(--side-width);
            border-right: var(--standard-border);
            position: fixed;
            overflow: auto;
            -ms-overflow-style: none;
            -moz-overflow-style: none;
            background-color: var(--bg);
            transition: background-color var(--duration) var(--curve),
                border-color var(--duration) var(--curve),
                filter var(--duration) var(--curve);
            scrollbar-width: none;
            font-size: 0.82rem;

            .inner {
                .logo {
                    max-width: 20rem;

                    a {
                        display: block;
                        transition: var(--transition);
                        text-align: center;

                        img {
                            width: calc(var(--side-width) * 0.8);
                            height: calc(var(--side-width) * 0.8);
                            max-width: 100%;
                            vertical-align: middle;
                            aspect-ratio: 1/1;
                            transition: var(--transition-out);
                            image-rendering: -webkit-optimize-contrast;
                        }

                        img:hover {
                            transform: scale(1.2, 1.2);
                        }
                    }
                }

                .tagline {
                    font-weight: var(--bold-weight);
                    line-height: 1.5;
                    text-align: left;
                    margin: 0 auto 2rem;
                }
            }
        }

        .content {
            animation: slowShow calc(2 * var(--duration)) var(--curve) both;
            margin-left: 240px;
            margin-left: var(--side-width);
            padding: var(--h-margin) var(--h-margin) 0;
        }
    }
}
